<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 遍历数组 -->
        <h3>人员列表</h3>
        <input type="text" placeholder="请输入名字" v-model="keyWord"/>
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul>
            <li v-for="(p,index) in filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
                <input type="text"/>
            </li>
        </ul>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               sortType: 0,//0原顺序,1升序,2降序
               keyWord: '',
               persons: [
                   {id: '001',name: '马冬梅',age: 30,sex: '女'},
                   {id: '002',name: '周冬雨',age: 31,sex: '女'},
                   {id: '003',name: '周杰伦',age: 18,sex: '男'},
                   {id: '004',name: '温兆伦',age: 19,sex: '男'}
               ]
           },
           methods:{},
           computed: {
            filPersons(){
                const arr = this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!==-1;
                });
                //判断一下是否是要排序
                if (this.sortType) {
                    arr.sort((p1,p2)=>{
                        return this.sortTyp == 1 ? p2.age-p1.age : p1.age-p2.age;
                    });
                }
                return arr;
            }
           }
        });
    </script>
</body>

</html>